
// src/utils/chartUtils.js  
import * as echarts from 'echarts';  

// 初始化 ECharts 图表  
export function initEChart(chartDom, options) {  
    const myChart = echarts.init(chartDom);  // 初始化图表实例  
    myChart.setOption(options);  // 设置图表配置  

    // 返回 ECharts 实例，以便后续操作  
    return myChart;  
}  

export const lineOptions = () => ( 
    {
    color:['#FFA300','#D36667','#5973FE','#5973FE'],
    tooltip:{
        show:true,
        trigger:'axis',
        formatter: '{b} : {c} 晚期纳瓦斯',
        axisPointer: {
            type:'shadow' // 默认为直线，可选 line | shadow
        }
    },
    legend: {
        show:true,
        bottom: '0%',
        itemWidth:28, // 柱子粗细
        itemHeight: 10,
        animation: false,
        textStyle:{
            color:'#3A3A3A',
            fontSize:16
        }
        
    },
    grid:{
        top:'10%',
        left:'4%',
        right:'2%',
        bottom:'10%',
        containLabel:true
    },
    xAxis: {
        data:[],
        // 坐标轴
        axisLine:{
            show:true,
            lineStyle:{
                type: 'solid',
                color:'#DFDFDF'
            }
        },
        axisTick:{
            show:false
        },
        // 坐标值标注
        axisLabel:{
            show:true,
            textStyle:{
                color:'#707070',
                fontSize:15,
                width:100
            }
        }
    },
    yAxis:[
        {
            type:'value',
            name:'单位',
            nameTextStyle:{
                fontSize:15,
                color:'#707070',
                padding:[0,0,0,-40]
            },
            // 坐标
            axisLine:{
                show:true,
            },
            // 坐标值标注
            axisLabel:{
                show:true,
                textStyle:{
                    color:'#707070',
                    fontSize:15,
                    width:100
                }
            },
            // 分割线
            splitLine:{
                type: 'value',
                lineStyle:{
                    show: true,
                    type:'solid',
                    color:'#DFDFDF'
                }
            } 
        },
        {
            type:'value',
            name:'单位',
            position:'right',
            min:-10,
            max:15,
            interval:5,
            axisLabel:{
                formatter:'{value}%'
            }
        }
    ],
    series:[
        {
            name:'linear',
            type:'bar',
            symbolSize:6,
            smooth:true,
            barWidth:12,
            data:[],
            itemStyle:{
                color:{
                    type: 'linear',
                    x:0,
                    x2:0,
                    y:0,
                    y2:1,
                    colorStops:[
                        {offset:0,color:'#36AAF5'},
                        {offset:1,color:'#36AAF5'},
                    ]
                }
            },
            markArea:{
                data:[],
                silent: false,
            }
        },
        {
            name:'同期',
            type:'line',
            symbolSize:6,
            smooth: true,
            lineStyle:{
                // 设置虚线
                type:'dotted',
                width:2
            },
            data:[]
        },
        {
            name:'事件',
            type:'scatter',
            symbol:'pin',
            symbolSize:[80,80],
            label:{
                normal:{
                    show:true,
                    textStyle: {
                        color:'#fff',
                        fontSize:12,
                        fontWeight:600
                    },
                    formatter(value){
                        return value.data.jztmc
                    }
                }
            },
            tooltip:{
                // position: function(point,params,dom,rect,size){
                //     // 当前鼠标位置
                //     let pointX = point[0]
                //     let pointY = point[1]
                //     return [pointX,pointY]
                // }
                enterable: true, // 可以悬停在浮窗 --- 进行点击事件
                trigger: 'item', // 坐标轴触发，应用于柱状图，折线图
                triggerOn:'mousemove', // 鼠标移动时触发
                axisPointer:{
                    type: 'none'
                },
                backgroundColor:'rgba(255,255,255,0)',
                borderColor:'rgba(255,255,255,0)',
                padding: [0,0,0,0],
                borderRadius:10,
                formatter: function(params){
                    let result = params.data || {}
                    let str = ''
                    str  += `<div 
                        style = "
                        padding:20px;
                        font-size:14px;
                        color:#000;
                        font-weight:500;
                        background-color: rgb(253, 246, 236);
                        border-radius:10px;
                        "
                        >
                        <div style="display:flex;
                        aling-items:center;
                        justify-content:space-between;"><div>异动</div><div style="color:#333；
                        text-align:center;
                        line-height:38px;
                        width:109px;
                        height:36px;
                        background:#fff;
                        border-raius:4px;cursor:pointer" class="clTic" data-param="${result.keyVlaue}">查看原因</div></div>
                        <div><span>指标：</span><span>${result.ydzb}</span></div>
                        <div><span>法子：</span><span>${result.sdyz}</span></div>
                        <div><span>异动值：</span><span>${result.ydz}</span></div>
                        <div style="margin-top:20px">关联</div>
                        <div><span>事件类型：</span><span>${result.sjlx}</span></div>
                        <div><span>事件主题名称：</span><span>${result.sjztmc}</span></div>
                        <div><span>影响单位范围：</span><span>${result.yxdwfw}</span></div>
                        <div><span>影响时间范围：</span><span>${result.yxsjfw}</span></div>
                        <div><span>影响行业范围：</span><span>${result.yxhyfw}</span></div>
                        <div><span>影响结果：</span><span>${result.yxjg}</span></div>
                    </div>`
                    return str
                }
            },
            data: []
        },
        {
            name: '绿色',
            type:'line',
            symbolSize:6,
            smooth: true,
            lineStyle:{
                // 设置虚线
                type:'dotted',
                width:2
            },
            data:[]
        }
    ]
}
)
var areaStyle = {
    silent: false,
    itemStyle: {
        normal: {
            color: 'rgba(241, 28, 93, 0.05)'
        }
    },
    data: [
        [
            {
                name: '预警区域',
                xAxis: '产品4',
                label: {
                    normal: {
                        offset: [500, 500],
                        fontSize: 14
                    }
                }
            },
            {
                xAxis: '产品9'
            }
        ]
    ]
}
export const  option = () => (

    {
        title: {
            text: '项目需要的堆叠图',
            subtext: 'gogoogogogo',
            x: 'center',
            align: 'right'
        },
    
        backgroundColor: '#fff',
        color: ['#16c2af', '#ffc751', '#4162ff', '#ff6e72', '#9692ff'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            x: 'center',
            top: '8%',
            data: ['20', '50', '80', '100', '150']
        },
        grid: { //图表的位置
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true
        },
        yAxis: [{
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    color: ['#f2f2f2']
                }
            },
        }],
        xAxis: [{
            type: 'category',
            data: ['产品1', '产品2', '产品3', '产品4', '产品5', '产品6', '产品8', '产品9']
        }],
        series: [{
                name: '20',
                type: 'bar',
                stack: '总量',
                barWidth: '30px',
                data: [0, 212, 101, 0, 0, 0, 120, 0],
                markArea: areaStyle
            },
            {
                name: '50',
                type: 'bar',
                stack: '总量',
                data: [0, 232, 251, 0, 0, 0, 10, 0],
                markArea: areaStyle
            },
            {
                name: '80',
                type: 'bar',
                stack: '总量',
                data: [0, 232, 231, 134, 190, 0, 110, 0],
                markArea: areaStyle
            },
            {
                name: '100',
                type: 'bar',
                stack: '总量',
                data: [0, 132, 101, 0, 0, 150, 210, 0],
                markArea: areaStyle
            },
            {
                name: '150',
                type: 'bar',
                stack: '总量',
                data: [120, 252, 201, 134, 60, 0, 150, 0],
                markArea: areaStyle
            },
            {
                name: '300',
                type: 'bar',
                stack: '总量',
                data: [120, 0, 0, 184, 70, 0, 0, 90],
                markArea: areaStyle
            },
            {
                name: '500',
                type: 'bar',
                stack: '总量',
                data: [120, 0, 0, 174, 10, 230, 0, 0],
                markArea: areaStyle
            },
            {
                name: '800',
                type: 'bar',
                stack: '总量',
                data: [220, 0, 0, 134, 70, 0, 0, 0],
                markArea: areaStyle
            },
            {
                name: '1000',
                type: 'bar',
                stack: '总量',
                data: [0, 0, 0, 0, 0, 0, 0, 90],
                markArea: areaStyle
            }
        ]
    }

)
